<template>
	<view>
		<cu-custom bgColor="bg-gradual-green" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">添加客户</block>
		</cu-custom>
		<form>
			<!-- <view class="cu-form-group margin-top">
				<view class="title">头像</view>
				<view class="cu-avatar radius bg-gray" @click="chooseImage" v-if="!avatar"></view>
				<view class="bg-img" @tap="chooseImage" v-if="avatar">
					<image style="width: 100upx;height: 100upx;border-radius: 50upx;" :src="avatar" mode="aspectFill"></image>
				</view>
			</view> -->
			<view class="cu-form-group">
				<view class="title">姓名
					<view class="cu-tag badge" style="position: absolute;left: -17upx;top: 20upx;"></view>
				</view>
				<input style="text-align: right;" @input="nameInput" placeholder="请输入姓名" name="input"></input>
			</view>
			
			<view class="cu-form-group">
				<view class="title">手机号
					<view class="cu-tag badge" style="position: absolute;left: -17upx;top: 20upx;"></view>
				</view>
				<input style="text-align: right;" type="number" 	v-model="phone" placeholder="请输入手机号" name="input"></input>
			</view>
			<radio-group class="block" @change="RadioChange">
				<view class="cu-form-group">
					<view class="title">性别</view>
					<view>
						<radio class='blue radio margin-sm' :class="radio=='1'?'checked':''" :checked="radio=='1'?true:false" value="1"></radio> 男
						<radio class='blue radio margin-sm' :class="radio=='2'?'checked':''" :checked="radio=='2'?true:false" value="2"></radio> 女
					</view>
				</view>
			</radio-group>
			
			<radio-group class="block" @change="RadioChangeB">
				<view class="cu-form-group">
					<view class="title">是否是会员</view>
					<view>
						<radio class='blue radio margin-sm' :class="radio=='1'?'checked':''" :checked="radio=='1'?true:false" value="1"></radio> 是
						<radio class='blue radio margin-sm' :class="radio=='2'?'checked':''" :checked="radio=='2'?true:false" value="2"></radio> 否
					</view>
				</view>
			</radio-group>
			
			<view class="cu-form-group" @tap="showModal" data-target="RadioModal" v-if="gymList.length > 0">
				<view class="title">健身房所在区域</view>
				<view>
					{{ gymList_select }}
				</view>
			</view>
			<view class="cu-modal" :class="modalName=='RadioModal'?'show':''" @tap="hideModal">
				<view class="cu-dialog" @tap.stop="">
					<radio-group class="block" @change="RadioChange_gymList">
						<view class="cu-list menu text-left">
							<view class="cu-item" v-for="(item,index) in gymList" :key="index">
								<label class="flex justify-between align-center flex-sub">
									<view class="flex-sub">{{item.gymName}}</view>
									<radio class="round" :class="radio==index?'checked':''" :checked="radio==index?true:false"
								 :value="index"></radio>
								</label>
							</view>
						</view>
					</radio-group>
				</view>
			</view>
			<!-- 性别女的特选区 -->
			<!-- <view class="cu-form-group" v-if="radio=='D'">
				<view class="title">生理期</view>
				<picker mode="date" :value="date" start="1900-09-01" end="2030-09-01" @change="DateChange">
					<view class="picker">
						{{date}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group" v-if="radio=='D'">
				<view class="title" >生理周期</view>
				<picker mode="date" :value="date" start="1900-09-01" end="2030-09-01" @change="DateChange">
					<view class="picker">
						{{date}}
					</view>
				</picker>
			</view> -->
			
			<view class="cu-form-group margin-top">
				<view class="title">访客到店时间
					<view class="cu-tag badge" style="position: absolute;left: -17upx;top: 20upx;"></view>
				</view>
				<picker mode="date" :value="date" start="2020-02-02" end="2040-09-01" @change="DateChange">
					<view class="picker">
						{{date}}
					</view>
				</picker>
			</view>
			
			<view class="cu-form-group">
				<view class="title">会员上课名称</view>
				<input style="text-align: right;" @input="courseNameInput" placeholder="请输入会员上课名称" name="courseName"></input>
			</view>
			
			<view class="cu-form-group">
				<view class="title">会员上课时间</view>
				<hTimePicker sTime="0" cTime="23" interval="1" @changeTime="changeTime">
				  <view slot="pCon" class="changeTime" style="font-size: 30upx;color: #999;margin-right: -20upx;">
						<text v-if="!courseDate">请选择会员上课时间</text>
						<text v-if="courseDate"> {{courseDate}} </text>
				  </view>
				</hTimePicker>
				<!-- <view>
					{{courseDate}}
				</view> -->
			</view>
			
			<view class="cu-form-group">
				<view class="title">会员卡名称</view>
				<input style="text-align: right;" @input="courseCardInput" placeholder="请输入会员卡名称" name="courseCard"></input>
			</view>
			
			<view class="cu-form-group">
				<view class="title">推荐人</view>
				<input style="text-align: right;" @input="refereesInput" placeholder="请输入推荐人" name="referees"></input>
			</view>
		
			<view class="cu-form-group">
				<view class="title">推荐人手机号码</view>
				<input style="text-align: right;" @input="refereesPhoneInput" placeholder="请输入推荐人手机号码" name="refereesPhone"></input>
			</view>
			
			<!-- <view class="margin-top" style="background-color: #fff;padding: 30upx;">
				<view>会员上课时间</view>
				<textarea style="margin-top: 30upx;height: 150upx;" :disabled="modalName!=null" @input="textareaCInput" placeholder="如:*月*日 下午..."></textarea>
			</view> -->
			<view class="margin-top" style="background-color: #fff;padding: 30upx;">
				<view>备注</view>
				<textarea style="margin-top: 30upx;height: 150upx;" :disabled="modalName!=null" @input="textareaAInput" placeholder="添加备注"></textarea>
			</view>
			<view class="margin-top" style="background-color: #fff;padding: 30upx;">
				<view>建议</view>
				<textarea style="margin-top: 30upx;height: 100upx;" :disabled="modalName!=null" @input="textareaBInput" placeholder="添加建议"></textarea>
			</view>
			
			<button class="cu-btn bg-gradual-green shadow-blur round lg" style="width: 80%;margin-left: 10%;margin-top: 100upx;margin-bottom: 150upx;" @click="submit">保存</button>
			
			
		</form>
	</view>
</template>

<script>
	import hTimePicker from "@/components/h-timePicker/h-timePicker.vue";
	export default {
		components: { hTimePicker },
		data() {
			return {
				userName:'',
				sex:'',
				phone:'',
				gymList:[],
				gymList_select: '',// 选中的教练房名字,最后提交要id,map一下
				gymId:'', // 健身房id
				date: '请选择访客到店时间',
				courseName: '',
				courseDate: '',
				// kxdatetime2: '', // 会员选课默认为当前时间
				courseCard: '',
				referees:'',
				refereesPhone:'',
				remark: '',
				advice:'',
				isMembers:'',
				
				index: -1,
				multiIndex: [0, 0, 0],
				// time: '12:01',
				// radio: '',
				imgList: [],
				avatar: '',
				modalName: null,
				textareaAValue: '',
				textareaBValue: '',
				openid:'',
			};
		},
		onLoad(){
			uni.getStorage({
				key: 'gymList',
				success: (res) => {
					let gymList = res.data
					if (gymList.length != 0) {
						let g = []
						for (let i in gymList ) {
							g[i] = gymList[i]
						}
						this.gymList = g
						this.gymList_select = this.gymList[0].gymName // 初始化健身房名和id
						this.gymId = this.gymList[0].gymId
					}
			 },
			 fail: () => {
			 }
			});
			
			var o = this
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					o.openid = res.data
			 },
			 fail: () => {
			 }
			});
		},
		methods: {
			PickerChange(e) {
				this.index = e.detail.value
			},
			nameInput(e){
				this.userName = e.detail.value
			},
			courseNameInput(e){
				this.courseName = e.detail.value
			},
			courseCardInput(e){
				this.courseCard = e.detail.value
			},
			refereesInput(e){
				this.referees = e.detail.value
			},
			refereesPhoneInput(e){
				this.refereesPhone = e.detail.value
			},
			MultiChange(e) {
				this.multiIndex = e.detail.value
			},
			changeTime(e){
				console.log(e)
				this.courseDate = e
			},
			// TimeChange(e) {
			// 	this.time = e.detail.value
			// },
			DateChange(e) {
				this.date = e.detail.value
			},
			RegionChange(e) {
				this.region = e.detail.value
			},
			RadioChange(e) {
				this.sex = e.detail.value
			},
			RadioChangeB(e) {
				this.isMembers = e.detail.value
			},
			RadioChange_gymList(e) {
				let o = this
				this.gymList_select = this.gymList[e.detail.value].name
				setTimeout(function() {
					o.hideModal()
				}, 300);
			},
			chooseImage(){
				var _this = this
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: function (res) {
							let file = res.tempFilePaths
							var images = []
							var img = ''
							for(var i = 0; i<res.tempFilePaths.length; i++) {
								uni.uploadFile({
									url: 'https://wechatdemo.mygodmall.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=util.uploader&app=1',
									//仅为示例，非真实的接口地址
									filePath: file[i],
									name: 'file',
									formData: {
										'user': 'test'
									},
									success: (res) => {
										images.push(JSON.parse(res.data).url)
										_this.imagess = images
										_this.avatar = _this.imagess[0]
										
										img = img + JSON.parse(res.data).url + ';'
										_this.imgurl = img
									}
								});
							}
				    }
				});
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			textareaCInput(e) {
				this.courseDate = e.detail.value
			},
			textareaAInput(e) {
				this.remark = e.detail.value
			},
			textareaBInput(e) {
				this.advice	 = e.detail.value
			},
			submit(){
				if ( this.courseDate == '请选择会员上课时间') {
					this.courseDate = ''
				}
				if ( this.userName == '') {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
					return
				}
				if ( this.phone == '') {
					uni.showToast({
						title: '请输入会员手机号',
						icon: 'none'
					})
					return
				}
				if ( this.date == '请选择访客到店时间') {
					uni.showToast({
						title: '请选择访客到店时间',
						icon: 'none'
					})
					return
				}
				// if ( this.date == '请选择访客到店时间') {
				// 	uni.showToast({
				// 		title: '请选择访客到店时间',
				// 		icon: 'icon'
				// 	})
				// 	return
				// }
				var data = {
					coachId: this.openid,
					gymId: this.gymId, // 健身房id
					userName: this.userName,
					sex:this.sex,
					phone:this.phone,
					// 'avatar':this.avatar,
					date:this.date,
					courseName:this.courseName,
					courseDate:this.courseDate,
					courseCard:this.courseCard,
					referees:this.referees,
					refereesPhone:this.refereesPhone,
					remark:this.remark,
					advice:this.advice,
					isMembers :this.isMembers,
				}
				for ( let i in data ) {
					console.log(i)
					if (data[i] == '' || data[i] == undefined || data[i] == null) {
						delete data[i]
					}
				}
				uni.request({
					url: 'https://jxjsservice.jxfit.cn/coach/visitors/addVisitorsRecord',
					method: 'POST',
					data: data,
					header:{'Content-Type':'application/x-www-form-urlencoded;charset=utf-8'},
					success: res => {
						this.courseDate == '请选择会员上课时间'
						if (res.data.result == 200) {
							uni.showToast({
								title: '提交成功',
								icon: 'none'
							})
							setTimeout(function() {
								uni.redirectTo({
									url: '/pages/index/index'
								})
							}, 1200);
						} else {
							uni.showToast({
								title: res.data.msg
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
		}
	}
</script>

<style>
	@import "/colorui/main.css";
	@import "/colorui/icon.css";
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
	button .cu-tag {
		position: absolute;
		top: 8upx;
		right: 8upx;
	}
</style>
